@charset "utf-8";
/* CSS Document */

.mainline{position:absolute;z-index: 6;top:0;left:0;width:100%;height:100%;}
.mainl1{
position:absolute;top:50%;left:50%;
background:#fff;
margin:-220px 0 0 230px;
width:200px;
height:1px;
}

.mainl2{
position:absolute;top:50%;left:50%;
background:#fff;
margin:-250px 0 0 190px;
width:80px;
height:1px;

}
.mainl3{
position:absolute;top:50%;left:50%;
background:#fff;
margin:-180px 0 0 260px;
width:60px;
height:1px;

}
.mainl4{
position:absolute;top:50%;left:50%;
background:#fff;
margin:230px 0 0 -210px;
width:220px;
height:1px;

}
.mainl5{
position:absolute;top:50%;left:50%;
background:#fff;
margin:190px 0 0 -250px;
width:100px;
height:1px;

}
.mainl6{
position:absolute;top:50%;left:50%;
background:#fff;
margin:270px 0 0 -160px;
width:70px;
height:1px;

}
.mainline2{
 position:absolute;
 z-index: 6;
 top:60%;
 left:50%;
 margin:-360px 0 0 -360px;
 width:700px;
 height:700px;
 border-left: 1px solid rgba(255,255,255,1);
 border-right: 1px solid rgba(255,255,255,1);
 border-bottom: 1px solid rgba(255,255,255,.2);
 border-top: 1px solid rgba(255,255,255,.2);
 border-radius: 100%;
 transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
 -o-transform: rotate(90deg);
}

.mainla{position:absolute;top:50%;left:50%;background:#fff;margin:0 0 0 -550px;width:200px;height:1px;opacity: 1;}
.mainlb{position:absolute;top:50%;left:50%;background:#fff;margin:0 0 0 350px;width:200px;height:1px;opacity: 1;}

.mainld1{position:absolute;top:50%;left:50%;background:#fff;margin:-2px 0 0 -502px;width:4px;height:4px;border-radius: 100%;opacity: 1;}
.mainld2{position:absolute;top:50%;left:50%;background:#fff;margin:-2px 0 0 498px;width:4px;height:4px;border-radius: 100%;opacity: 1;}
.mainld3{position:absolute;top:50%;left:50%;background:#fff;margin:-2px 0 0 -401px;width:4px;height:4px;border-radius: 100%;opacity: 1;}
.mainld4{position:absolute;top:50%;left:50%;background:#fff;margin:-2px 0 0 399px;width:4px;height:4px;border-radius: 100%;opacity: 1;}

.mainlr{
 position:absolute;
 top:50%;
 left:50%;
 background:rgba(0,10,50,.05);
 margin:-350px 0 0 -350px;
 width:700px;
 height:700px;
 border-left: 1px solid rgba(255,255,255,1);
 border-right: 1px solid rgba(255,255,255,1);
 border-bottom: 1px solid rgba(255,255,255,.3);
 border-top: 1px solid rgba(255,255,255,.3);
 border-radius: 100%;
}
.mainl1{
  transform: rotate(-45deg);
  transform-origin:0 0;
  -ms-transform: rotate(-45deg);
  -ms-transform-origin:0 0;
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin:0 0;
  -o-transform: rotate(-45deg);
  -o-transform-origin:0 0;
  animation:line1move 1.5s infinite alternate;
  animation-delay:3s;
  -webkit-animation:line1move 1.5s infinite alternate;
  -webkit-animation-delay:3s;
  -moz-animation:line1move 1.5s infinite alternate;
  -moz-animation-delay:3s;
  -o-animation:line1move 1.5s infinite alternate;
  -o-animation-delay:3s;
}
@keyframes line1move{
  from {width:200px;}
  to {width:0px;}
}
@-webkit-keyframes line1move{
  from {width:200px;}
  to {width:0px;}
}
@-moz-keyframes line1move{
  from {width:200px;}
  to {width:0px;}
}
@-o-keyframes line1move{
  from {width:200px;}
  to {width:0px;}
}


.mainl2{
  transform: rotate(-45deg);
  transform-origin:0 0;
  -ms-transform: rotate(-45deg);
  -ms-transform-origin:0 0;
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin:0 0;
  -o-transform: rotate(-45deg);
  -o-transform-origin:0 0;
  animation:line2move 1.2s infinite alternate;
  animation-delay:3s;
  -webkit-animation:line2move 1.2s infinite alternate;
  -webkit-animation-delay:3s;
  -moz-animation:line2move 1.2s infinite alternate;
  -moz-animation-delay:3s;
  -o-animation:line2move 1.2s infinite alternate;
  -o-animation-delay:3s;
}
@keyframes line2move{
  from{width:80px;}
  to{width:0px;}
}
@-webkit-keyframes line2move{
  from {width:80px;}
  to {width:0px;}
}
@-moz-keyframes line2move{
  from {width:80px;}
  to {width:0px;}
}
@-o-keyframes line2move{
  from {width:80px;}
  to {width:0px;}
}
.mainl3{
  transform: rotate(-45deg);
  transform-origin:0 0;
  -ms-transform: rotate(-45deg);
  -ms-transform-origin:0 0;
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin:0 0;
  -o-transform: rotate(-45deg);
  -o-transform-origin:0 0;
  animation:line3move 1s infinite alternate;
  animation-delay:3s;
    -webkit-animation:line3move 1s infinite alternate;
  -webkit-animation-delay:3s;
  -moz-animation:line3move 1s infinite alternate;
  -moz-animation-delay:3s;
  -o-animation:line3move 1s infinite alternate;
  -o-animation-delay:3s;
}
@keyframes line3move{
  from{width:60px;}
  to{width:0px;}
}
@-webkit-keyframes line3move{
  from {width:60px;}
  to {width:0px;}
}
@-moz-keyframes line3move{
  from {width:60px;}
  to {width:0px;}
}
@-o-keyframes line3move{
  from {width:60px;}
  to {width:0px;}
}
.mainl4{
  transform: rotate(135deg);
  transform-origin:0 0;
  -ms-transform: rotate(135deg);
  -ms-transform-origin:0 0;
  -webkit-transform: rotate(135deg);
  -webkit-transform-origin:0 0;
  -o-transform: rotate(135deg);
  -o-transform-origin:0 0;
  animation:line4move 1.5s infinite alternate;
  animation-delay:3s;
  -webkit-animation:line4move 1.5s infinite alternate;
  -webkit-animation-delay:3s;
  -moz-animation:line4move 1.5s infinite alternate;
  -moz-animation-delay:3s;
  -o-animation:line4move 1.5s infinite alternate;
  -o-animation-delay:3s;
}
@keyframes line4move{
  from{width:0px;}
  to{width:220px;}
}
@-webkit-keyframes line4move{
  from {width:0px;}
  to {width:200px;}
}
@-moz-keyframes line4move{
  from {width:0px;}
  to {width:200px;}
}
@-o-keyframes line4move{
  from {width:0px;}
  to {width:200px;}
}
.mainl5{
  transform: rotate(135deg);
  transform-origin:0 0;
  -ms-transform: rotate(135deg);
  -ms-transform-origin:0 0;
  -webkit-transform: rotate(135deg);
  -webkit-transform-origin:0 0;
  -o-transform: rotate(135deg);
  -o-transform-origin:0 0;
  animation:line5move 1.2s infinite alternate;
  animation-delay:3s;
  -webkit-animation:line5move 1.2s infinite alternate;
  -webkit-animation-delay:3s;
  -moz-animation:line5move 1.2s infinite alternate;
  -moz-animation-delay:3s;
  -o-animation:line5move 1.2s infinite alternate;
  -o-animation-delay:3s;
}
@keyframes line5move{
  from{width:0px;}
  to{width:100px;}
}
@-webkit-keyframes line5move{
  from {width:0px;}
  to {width:100px;}
}
@-moz-keyframes line5move{
  from {width:0px;}
  to {width:100px;}
}
@-o-keyframes line5move{
  from {width:0px;}
  to {width:100px;}
}
.mainl6{
  transform: rotate(135deg);
  transform-origin:0 0;
  -ms-transform: rotate(135deg);
  -ms-transform-origin:0 0;
  -webkit-transform: rotate(135deg);
  -webkit-transform-origin:0 0;
  -o-transform: rotate(135deg);
  -o-transform-origin:0 0;
  animation:line6move 1s infinite alternate;
  animation-delay:3s;
  -webkit-animation:line6move 1s infinite alternate;
  -webkit-animation-delay:3s;
  -moz-animation:line6move 1s infinite alternate;
  -moz-animation-delay:3s;
  -o-animation:line6move 1s infinite alternate;
  -o-animation-delay:3s;
}
@keyframes line6move{
  from{width:0px;}
  to{width:70px;}
}
@-webkit-keyframes line6move{
  from {width:0px;}
  to {width:70px;}
}
@-moz-keyframes line6move{
  from {width:0px;}
  to {width:70px;}
}
@-o-keyframes line6move{
  from {width:0px;}
  to {width:70px;}
}

/*ÕýÛ¼Ðýת²ã*/
.mainxza{
  margin:0 0 0 10%;
  width:80%;
  height:100%;
  display: table;
  overflow: hidden;
  position: absolute;
  z-index: 6;
  top: 10%
  }
.mainxzb{
  margin:0 0 0 10%;
  width:80%;
  height:100%;
  display: table;
  overflow: hidden;
  position: absolute;
  z-index: 6;
  top: 10%
  }

.mainxz1 img{max-width:600px;max-height:600px;width:100%;}
.mainxz2 img{max-width:600px;max-height:600px;width:100%;}

.mainxz1{
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin:0 auto;
  text-align: center;
}
.mainxz2{
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin:0 auto;
  text-align: center;
  opacity:0.5;
}

@media screen and (max-width: 640px) {

}

.mainxz1 img{
  animation: mainzx1 120s infinite linear;
  -webkit-animation:mainzx1 120s infinite linear;
  -moz-animation:mainzx1 120s infinite linear;
  -o-animation:mainzx1 120s infinite linear;
}
@-webkit-keyframes mainzx1 {
 from {
  -webkit-transform: rotate(0deg)
}
to {
  -webkit-transform: rotate(359deg)
}
}
@-moz-keyframes mainzx1 {
 from {
  -moz-transform: rotate(0deg)
}
to {
  -moz-transform: rotate(359deg)
}
}
@-o-keyframes mainzx1 {
 from {
  -o-transform: rotate(0deg)
}
to {
  -o-transform: rotate(359deg)
}
}
@keyframes mainzx1 {
 from {
  transform: rotate(0deg)
}
to {
  transform: rotate(359deg)
}
}

.mainxz2 img{
  animation: mainzx2 60s infinite linear;
  -webkit-animation:mainzx2 60s infinite linear;
  -moz-animation:mainzx2 60s infinite linear;
  -o-animation:mainzx2 60s infinite linear;
}
@-webkit-keyframes mainzx2 {
 from {
  -webkit-transform: rotate(0deg)
}
to {
  -webkit-transform: rotate(-359deg)
}
}
@-moz-keyframes mainzx2 {
 from {
  -moz-transform: rotate(0deg)
}
to {
  -moz-transform: rotate(-359deg)
}
}
@-o-keyframes mainzx2 {
 from {
  -o-transform: rotate(0deg)
}
to {
  -o-transform: rotate(-359deg)
}
}
@keyframes mainzx2 {
 from {
  transform: rotate(0deg)
}
to {
  transform: rotate(-359deg)
}
}

.mainline2{
  -webkit-animation: mainline2xz 8s infinite alternate;
  -moz-animation: mainline2xz 8s infinite alternate;
  -o-animation: mainline2xz 8s infinite alternate;
  animation: mainline2xz 8s infinite alternate;
}

@-webkit-keyframes mainline2xz {
 from {
  -webkit-transform: rotate(90deg)
}
to {
  -webkit-transform: rotate(0deg)
}
}
@-moz-keyframes mainline2xz {
 from {
  -moz-transform: rotate(90deg)
}
to {
  -moz-transform: rotate(0deg)
}
}
@-o-keyframes mainline2xz {
 from {
  -o-transform: rotate(90deg)
}
to {
  -o-transform: rotate(0deg)
}
}
@keyframes mainline2xz {
 from {
  transform: rotate(90deg)
}
to {
  transform: rotate(0deg)
}
}

@media screen and (min-width: 480px) {/*PC¶ËµãÔÞ¶¯Ð§*/

.goodico{
 transition:background 0.5s;/*±³¾°ÑÕÉ«0.8Ãë¹ý¶É*/
 -moz-transition: background 0.5s; /* Firefox 4 */
 -webkit-transition: background 0.5s; /* Safari ºÍ Chrome */
 -o-transition: background 0.5s;/* Opera */
}
.scico{
 transition:background 0.8s;/*±³¾°ÑÕÉ«0.8Ãë¹ý¶É*/
 -moz-transition: background 0.5s; /* Firefox 4 */
 -webkit-transition: background 0.5s; /* Safari ºÍ Chrome */
 -o-transition: background 0.5s;/* Opera */
}

}

@media screen and (max-width: 480px) {/*Òƶ¯¶ËµãÔÞ¶¯Ð§*/
.goodico{
 transition:background-color 0.8s;/*±³¾°ÑÕÉ«0.8Ãë¹ý¶É*/
 -moz-transition: background-color 0.5s; /* Firefox 4 */
 -webkit-transition: background-color 0.5s; /* Safari ºÍ Chrome */
 -o-transition: background-color 0.5s;/* Opera */
}
.scico{
 transition:background-color 0.5s;/*±³¾°ÑÕÉ«0.8Ãë¹ý¶É*/
 -moz-transition: background-color 0.5s; /* Firefox 4 */
 -webkit-transition: background-color 0.5s; /* Safari ºÍ Chrome */
 -o-transition: background-color 0.5s;/* Opera */
}
}